<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kubernetes YAML 演示平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.21/vue.global.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .code-editor {
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 14px;
            line-height: 1.5;
        }
        .yaml-highlight {
            background: #f8f9fa;
            border-left: 4px solid #007bff;
            padding: 1rem;
            margin: 1rem 0;
        }
        .resource-card {
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        .resource-card:hover {
            border-color: #667eea;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
        }
        .theme-transition {
            transition: all 0.3s ease;
        }
    </style>
</head>
<body class="theme-transition">
    <div id="app">
        <!-- 导航栏 -->
        <div class="navbar bg-base-100 shadow-lg sticky top-0 z-50">
            <div class="navbar-start">
                <div class="dropdown">
                    <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
                        <i class="fas fa-bars text-xl"></i>
                    </div>
                    <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
                        <li><a @click="currentSection = 'overview'">概述</a></li>
                        <li><a @click="currentSection = 'resources'">资源类型</a></li>
                        <li><a @click="currentSection = 'examples'">配置示例</a></li>
                        <li><a @click="currentSection = 'validator'">YAML验证器</a></li>
                        <li><a @click="currentSection = 'generator'">配置生成器</a></li>
                        <li><a @click="currentSection = 'practices'">最佳实践</a></li>
                    </ul>
                </div>
                <a class="btn btn-ghost text-xl font-bold">
                    <i class="fab fa-kubernetes text-blue-500 mr-2"></i>
                    K8s YAML 演示平台
                </a>
            </div>
            <div class="navbar-center hidden lg:flex">
                <ul class="menu menu-horizontal px-1">
                    <li><a @click="currentSection = 'overview'" :class="{'active': currentSection === 'overview'}">概述</a></li>
                    <li><a @click="currentSection = 'resources'" :class="{'active': currentSection === 'resources'}">资源类型</a></li>
                    <li><a @click="currentSection = 'examples'" :class="{'active': currentSection === 'examples'}">配置示例</a></li>
                    <li><a @click="currentSection = 'validator'" :class="{'active': currentSection === 'validator'}">YAML验证器</a></li>
                    <li><a @click="currentSection = 'generator'" :class="{'active': currentSection === 'generator'}">配置生成器</a></li>
                    <li><a @click="currentSection = 'practices'" :class="{'active': currentSection === 'practices'}">最佳实践</a></li>
                </ul>
            </div>
            <div class="navbar-end">
                <div class="dropdown dropdown-end">
                    <div tabindex="0" role="button" class="btn btn-ghost">
                        <i class="fas fa-palette"></i>
                        主题
                    </div>
                    <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
                        <li><a @click="changeTheme('light')">浅色主题</a></li>
                        <li><a @click="changeTheme('dark')">深色主题</a></li>
                        <li><a @click="changeTheme('cupcake')">杯子蛋糕</a></li>
                        <li><a @click="changeTheme('cyberpunk')">赛博朋克</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <main class="min-h-screen">
            <!-- 概述页面 -->
            <div v-if="currentSection === 'overview'" class="hero min-h-screen gradient-bg">
                <div class="hero-content text-center text-white">
                    <div class="max-w-4xl">
                        <h1 class="text-6xl font-bold mb-8">
                            <i class="fab fa-kubernetes mr-4"></i>
                            Kubernetes YAML
                        </h1>
                        <p class="text-2xl mb-8">深入理解K8s配置文件的结构、使用与最佳实践</p>
                        <button class="btn btn-primary btn-lg mr-4" @click="currentSection = 'resources'">
                            <i class="fas fa-rocket mr-2"></i>
                            开始探索
                        </button>
                        <button class="btn btn-outline btn-lg" @click="currentSection = 'examples'">
                            <i class="fas fa-code mr-2"></i>
                            查看示例
                        </button>
                        
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16">
                            <div class="card bg-white/10 backdrop-blur-lg text-white">
                                <div class="card-body text-center">
                                    <i class="fas fa-file-code text-4xl mb-4"></i>
                                    <h3 class="card-title justify-center">YAML 基础</h3>
                                    <p>了解YAML语法、结构和在Kubernetes中的重要性</p>
                                    <div class="card-actions justify-center">
                                        <button class="btn btn-outline btn-sm" @click="currentSection = 'examples'">了解更多</button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card bg-white/10 backdrop-blur-lg text-white">
                                <div class="card-body text-center">
                                    <i class="fas fa-cubes text-4xl mb-4"></i>
                                    <h3 class="card-title justify-center">资源类型</h3>
                                    <p>探索Pod、Service、Deployment等核心K8s资源</p>
                                    <div class="card-actions justify-center">
                                        <button class="btn btn-outline btn-sm" @click="currentSection = 'resources'">查看资源</button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card bg-white/10 backdrop-blur-lg text-white">
                                <div class="card-body text-center">
                                    <i class="fas fa-tools text-4xl mb-4"></i>
                                    <h3 class="card-title justify-center">实用工具</h3>
                                    <p>YAML验证器、配置生成器等实用工具</p>
                                    <div class="card-actions justify-center">
                                        <button class="btn btn-outline btn-sm" @click="currentSection = 'validator'">使用工具</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 核心概念 -->
                        <div class="mt-20">
                            <h2 class="text-4xl font-bold mb-12">核心概念</h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                                <div class="text-center">
                                    <div class="bg-white/20 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                                        <span class="text-2xl font-bold">1</span>
                                    </div>
                                    <h3 class="text-xl font-bold mb-2">声明式配置</h3>
                                    <p class="text-sm">描述期望状态，让Kubernetes自动管理</p>
                                </div>
                                <div class="text-center">
                                    <div class="bg-white/20 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                                        <span class="text-2xl font-bold">2</span>
                                    </div>
                                    <h3 class="text-xl font-bold mb-2">资源对象</h3>
                                    <p class="text-sm">Pod、Service、Deployment等核心组件</p>
                                </div>
                                <div class="text-center">
                                    <div class="bg-white/20 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                                        <span class="text-2xl font-bold">3</span>
                                    </div>
                                    <h3 class="text-xl font-bold mb-2">标签选择器</h3>
                                    <p class="text-sm">通过标签关联和管理资源</p>
                                </div>
                                <div class="text-center">
                                    <div class="bg-white/20 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                                        <span class="text-2xl font-bold">4</span>
                                    </div>
                                    <h3 class="text-xl font-bold mb-2">命名空间</h3>
                                    <p class="text-sm">逻辑隔离和资源组织</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 资源类型页面 -->
            <div v-if="currentSection === 'resources'" class="container mx-auto px-4 py-8">
                <div class="text-center mb-12">
                    <h1 class="text-4xl font-bold mb-4">Kubernetes 资源类型</h1>
                    <p class="text-lg text-base-content/70">探索 Kubernetes 中的核心资源对象</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div v-for="resource in k8sResources" :key="resource.name" 
                         class="card bg-base-100 shadow-xl resource-card cursor-pointer"
                         @click="selectedResource = resource">
                        <div class="card-body">
                            <div class="flex items-center mb-4">
                                <i :class="resource.icon + ' text-3xl text-primary mr-4'"></i>
                                <h2 class="card-title">{{ resource.name }}</h2>
                            </div>
                            <p class="text-base-content/70 mb-4">{{ resource.description }}</p>
                            <div class="card-actions justify-end">
                                <div class="badge badge-outline">{{ resource.category }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 资源详情模态框 -->
                <div v-if="selectedResource" class="modal modal-open">
                    <div class="modal-box max-w-4xl">
                        <h3 class="font-bold text-lg mb-4">
                            <i :class="selectedResource.icon + ' mr-2'"></i>
                            {{ selectedResource.name }}
                        </h3>
                        <p class="mb-4">{{ selectedResource.description }}</p>
                        
                        <div class="tabs tabs-bordered mb-4">
                            <a class="tab tab-active">YAML 示例</a>
                        </div>
                        
                        <div class="mockup-code">
                            <pre><code>{{ selectedResource.yaml }}</code></pre>
                        </div>
                        
                        <div class="modal-action">
                            <button class="btn btn-primary" @click="copyToClipboard(selectedResource.yaml)">
                                <i class="fas fa-copy mr-2"></i>复制代码
                            </button>
                            <button class="btn" @click="selectedResource = null">关闭</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 配置示例页面 -->
            <div v-if="currentSection === 'examples'" class="container mx-auto px-4 py-8">
                <div class="text-center mb-12">
                    <h1 class="text-4xl font-bold mb-4">配置示例</h1>
                    <p class="text-lg text-base-content/70">常用的 Kubernetes YAML 配置示例</p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <div v-for="example in configExamples" :key="example.title" class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h2 class="card-title">
                                <i :class="example.icon + ' mr-2'"></i>
                                {{ example.title }}
                            </h2>
                            <p class="text-base-content/70 mb-4">{{ example.description }}</p>
                            <div class="mockup-code text-sm">
                                <pre><code>{{ example.yaml }}</code></pre>
                            </div>
                            <div class="card-actions justify-end mt-4">
                                <button class="btn btn-primary btn-sm" @click="copyToClipboard(example.yaml)">
                                    <i class="fas fa-copy mr-1"></i>复制
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- YAML验证器页面 -->
            <div v-if="currentSection === 'validator'" class="container mx-auto px-4 py-8">
                <div class="text-center mb-12">
                    <h1 class="text-4xl font-bold mb-4">YAML 验证器</h1>
                    <p class="text-lg text-base-content/70">验证您的 Kubernetes YAML 配置文件</p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h2 class="card-title mb-4">
                                <i class="fas fa-edit mr-2"></i>
                                输入 YAML 配置
                            </h2>
                            <textarea 
                                v-model="yamlInput" 
                                class="textarea textarea-bordered code-editor h-96" 
                                placeholder="请输入您的 Kubernetes YAML 配置...">
                            </textarea>
                            <div class="card-actions justify-end mt-4">
                                <button class="btn btn-primary" @click="validateYaml">
                                    <i class="fas fa-check mr-2"></i>验证 YAML
                                </button>
                                <button class="btn btn-outline" @click="clearYamlInput">
                                    <i class="fas fa-trash mr-2"></i>清空
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h2 class="card-title mb-4">
                                <i class="fas fa-clipboard-check mr-2"></i>
                                验证结果
                            </h2>
                            <div v-if="validationResult" class="h-96 overflow-y-auto">
                                <div v-if="validationResult.valid" class="alert alert-success">
                                    <i class="fas fa-check-circle"></i>
                                    <span>YAML 格式正确！</span>
                                </div>
                                <div v-else class="alert alert-error">
                                    <i class="fas fa-exclamation-triangle"></i>
                                    <span>YAML 格式错误：{{ validationResult.error }}</span>
                                </div>
                                
                                <div v-if="validationResult.valid && validationResult.parsed" class="mt-4">
                                    <h3 class="font-bold mb-2">解析结果：</h3>
                                    <div class="mockup-code text-sm">
                                        <pre><code>{{ JSON.stringify(validationResult.parsed, null, 2) }}</code></pre>
                                    </div>
                                </div>
                            </div>
                            <div v-else class="flex items-center justify-center h-96 text-base-content/50">
                                <div class="text-center">
                                    <i class="fas fa-clipboard-list text-4xl mb-4"></i>
                                    <p>验证结果将在这里显示</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 配置生成器页面 -->
            <div v-if="currentSection === 'generator'" class="container mx-auto px-4 py-8">
                <div class="text-center mb-12">
                    <h1 class="text-4xl font-bold mb-4">配置生成器</h1>
                    <p class="text-lg text-base-content/70">快速生成 Kubernetes YAML 配置文件</p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h2 class="card-title mb-4">
                                <i class="fas fa-cog mr-2"></i>
                                配置参数
                            </h2>
                            
                            <div class="form-control mb-4">
                                <label class="label">
                                    <span class="label-text">资源类型</span>
                                </label>
                                <select v-model="generatorConfig.resourceType" class="select select-bordered">
                                    <option value="deployment">Deployment</option>
                                    <option value="service">Service</option>
                                    <option value="pod">Pod</option>
                                    <option value="configmap">ConfigMap</option>
                                </select>
                            </div>

                            <div class="form-control mb-4">
                                <label class="label">
                                    <span class="label-text">资源名称</span>
                                </label>
                                <input v-model="generatorConfig.name" type="text" class="input input-bordered" placeholder="my-app">
                            </div>

                            <div class="form-control mb-4">
                                <label class="label">
                                    <span class="label-text">命名空间</span>
                                </label>
                                <input v-model="generatorConfig.namespace" type="text" class="input input-bordered" placeholder="default">
                            </div>

                            <div v-if="generatorConfig.resourceType === 'deployment'" class="space-y-4">
                                <div class="form-control">
                                    <label class="label">
                                        <span class="label-text">容器镜像</span>
                                    </label>
                                    <input v-model="generatorConfig.image" type="text" class="input input-bordered" placeholder="nginx:latest">
                                </div>
                                
                                <div class="form-control">
                                    <label class="label">
                                        <span class="label-text">副本数量</span>
                                    </label>
                                    <input v-model="generatorConfig.replicas" type="number" class="input input-bordered" placeholder="3">
                                </div>
                                
                                <div class="form-control">
                                    <label class="label">
                                        <span class="label-text">容器端口</span>
                                    </label>
                                    <input v-model="generatorConfig.port" type="number" class="input input-bordered" placeholder="80">
                                </div>
                            </div>

                            <div v-if="generatorConfig.resourceType === 'service'" class="space-y-4">
                                <div class="form-control">
                                    <label class="label">
                                        <span class="label-text">服务类型</span>
                                    </label>
                                    <select v-model="generatorConfig.serviceType" class="select select-bordered">
                                        <option value="ClusterIP">ClusterIP</option>
                                        <option value="NodePort">NodePort</option>
                                        <option value="LoadBalancer">LoadBalancer</option>
                                    </select>
                                </div>
                                
                                <div class="form-control">
                                    <label class="label">
                                        <span class="label-text">端口</span>
                                    </label>
                                    <input v-model="generatorConfig.port" type="number" class="input input-bordered" placeholder="80">
                                </div>
                                
                                <div class="form-control">
                                    <label class="label">
                                        <span class="label-text">目标端口</span>
                                    </label>
                                    <input v-model="generatorConfig.targetPort" type="number" class="input input-bordered" placeholder="8080">
                                </div>
                            </div>

                            <div class="card-actions justify-end mt-6">
                                <button class="btn btn-primary" @click="generateYaml">
                                    <i class="fas fa-magic mr-2"></i>生成 YAML
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h2 class="card-title mb-4">
                                <i class="fas fa-file-code mr-2"></i>
                                生成的 YAML
                            </h2>
                            <div v-if="generatedYaml" class="h-96 overflow-y-auto">
                                <div class="mockup-code">
                                    <pre><code>{{ generatedYaml }}</code></pre>
                                </div>
                                <div class="mt-4">
                                    <button class="btn btn-primary btn-sm mr-2" @click="copyToClipboard(generatedYaml)">
                                        <i class="fas fa-copy mr-1"></i>复制
                                    </button>
                                    <button class="btn btn-outline btn-sm" @click="downloadYaml">
                                        <i class="fas fa-download mr-1"></i>下载
                                    </button>
                                </div>
                            </div>
                            <div v-else class="flex items-center justify-center h-96 text-base-content/50">
                                <div class="text-center">
                                    <i class="fas fa-file-code text-4xl mb-4"></i>
                                    <p>生成的 YAML 配置将在这里显示</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 最佳实践页面 -->
            <div v-if="currentSection === 'practices'" class="container mx-auto px-4 py-8">
                <div class="text-center mb-12">
                    <h1 class="text-4xl font-bold mb-4">最佳实践</h1>
                    <p class="text-lg text-base-content/70">Kubernetes YAML 配置的最佳实践指南</p>
                </div>

                <div class="space-y-8">
                    <div v-for="practice in bestPractices" :key="practice.title" class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h2 class="card-title">
                                <i :class="practice.icon + ' mr-2'"></i>
                                {{ practice.title }}
                            </h2>
                            <p class="text-base-content/70 mb-4">{{ practice.description }}</p>
                            
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                                <div v-if="practice.good">
                                    <h3 class="font-bold text-success mb-2">
                                        <i class="fas fa-check mr-1"></i>推荐做法
                                    </h3>
                                    <div class="mockup-code text-sm">
                                        <pre><code>{{ practice.good }}</code></pre>
                                    </div>
                                </div>
                                
                                <div v-if="practice.bad">
                                    <h3 class="font-bold text-error mb-2">
                                        <i class="fas fa-times mr-1"></i>不推荐做法
                                    </h3>
                                    <div class="mockup-code text-sm">
                                        <pre><code>{{ practice.bad }}</code></pre>
                                    </div>
                                </div>
                            </div>
                            
                            <div v-if="practice.tips" class="alert alert-info mt-4">
                                <i class="fas fa-lightbulb"></i>
                                <span>{{ practice.tips }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="footer footer-center p-10 bg-base-200 text-base-content">
            <div>
                <div class="grid grid-flow-col gap-4">
                    <a class="link link-hover">关于我们</a>
                    <a class="link link-hover">联系方式</a>
                    <a class="link link-hover">帮助文档</a>
                    <a class="link link-hover">GitHub</a>
                </div>
                <div>
                    <p>Copyright © 2024 - Kubernetes YAML 配置演示平台</p>
                    <p class="text-sm text-base-content/70">
                        来源：<a href="#" class="link">深入理解Kubernetes YAML文件：结构、使用与最佳实践</a>
                    </p>
                </div>
            </div>
        </footer>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    currentSection: 'overview',
                    selectedResource: null,
                    yamlInput: '',
                    validationResult: null,
                    generatorConfig: {
                        resourceType: 'deployment',
                        name: 'my-app',
                        namespace: 'default',
                        image: 'nginx:latest',
                        replicas: 3,
                        port: 80,
                        targetPort: 8080,
                        serviceType: 'ClusterIP'
                    },
                    generatedYaml: '',
                    k8sResources: [
                        {
                            name: 'Pod',
                            icon: 'fas fa-cube',
                            category: '核心资源',
                            description: 'Kubernetes中最小的可部署单元，包含一个或多个容器',
                            yaml: `apiVersion: v1
kind: Pod
metadata:
  name: my-pod
  labels:
    app: my-app
spec:
  containers:
  - name: my-container
    image: nginx:latest
    ports:
    - containerPort: 80`
                        },
                        {
                            name: 'Deployment',
                            icon: 'fas fa-rocket',
                            category: '工作负载',
                            description: '管理Pod的副本集，提供声明式更新和回滚功能',
                            yaml: `apiVersion: apps/v1
kind: Deployment
metadata:
  name: my-deployment
spec:
  replicas: 3
  selector:
    matchLabels:
      app: my-app
  template:
    metadata:
      labels:
        app: my-app
    spec:
      containers:
      - name: my-container
        image: nginx:latest
        ports:
        - containerPort: 80`
                        },
                        {
                            name: 'Service',
                            icon: 'fas fa-network-wired',
                            category: '网络',
                            description: '为Pod提供稳定的网络访问入口和负载均衡',
                            yaml: `apiVersion: v1
kind: Service
metadata:
  name: my-service
spec:
  selector:
    app: my-app
  ports:
  - protocol: TCP
    port: 80
    targetPort: 8080
  type: ClusterIP`
                        },
                        {
                            name: 'ConfigMap',
                            icon: 'fas fa-cog',
                            category: '配置',
                            description: '存储非机密的配置数据，以键值对形式保存',
                            yaml: `apiVersion: v1
kind: ConfigMap
metadata:
  name: my-config
data:
  database_url: "postgresql://localhost:5432/mydb"
  debug: "true"
  config.yaml: |
    server:
      port: 8080
      host: localhost`
                        },
                        {
                            name: 'Secret',
                            icon: 'fas fa-key',
                            category: '配置',
                            description: '存储敏感信息，如密码、OAuth令牌和SSH密钥',
                            yaml: `apiVersion: v1
kind: Secret
metadata:
  name: my-secret
type: Opaque
data:
  username: YWRtaW4=
  password: MWYyZDFlMmU2N2Rm`
                        },
                        {
                            name: 'Ingress',
                            icon: 'fas fa-globe',
                            category: '网络',
                            description: '管理外部访问集群内服务的HTTP和HTTPS路由',
                            yaml: `apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: my-ingress
spec:
  rules:
  - host: example.com
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: my-service
            port:
              number: 80`
                        }
                    ],
                    configExamples: [
                        {
                            title: '简单的Web应用部署',
                            icon: 'fas fa-globe',
                            description: '部署一个简单的Nginx Web服务器',
                            yaml: `apiVersion: apps/v1
kind: Deployment
metadata:
  name: nginx-deployment
spec:
  replicas: 3
  selector:
    matchLabels:
      app: nginx
  template:
    metadata:
      labels:
        app: nginx
    spec:
      containers:
      - name: nginx
        image: nginx:1.20
        ports:
        - containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
  name: nginx-service
spec:
  selector:
    app: nginx
  ports:
  - port: 80
    targetPort: 80
  type: LoadBalancer`
                        },
                        {
                            title: '带持久化存储的数据库',
                            icon: 'fas fa-database',
                            description: '部署MySQL数据库并配置持久化存储',
                            yaml: `apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: mysql-pvc
spec:
  accessModes:
    - ReadWriteOnce
  resources:
    requests:
      storage: 10Gi
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: mysql
spec:
  selector:
    matchLabels:
      app: mysql
  template:
    metadata:
      labels:
        app: mysql
    spec:
      containers:
      - name: mysql
        image: mysql:8.0
        env:
        - name: MYSQL_ROOT_PASSWORD
          value: "password"
        ports:
        - containerPort: 3306
        volumeMounts:
        - name: mysql-storage
          mountPath: /var/lib/mysql
      volumes:
      - name: mysql-storage
        persistentVolumeClaim:
          claimName: mysql-pvc`
                        }
                    ],
                    bestPractices: [
                        {
                            title: '使用标签和选择器',
                            icon: 'fas fa-tags',
                            description: '合理使用标签来组织和选择资源',
                            good: `metadata:
  labels:
    app: my-app
    version: v1.0
    environment: production
    tier: frontend`,
                            bad: `metadata:
  labels:
    name: my-app`,
                            tips: '使用有意义的标签可以帮助更好地组织和管理资源'
                        },
                        {
                            title: '资源限制和请求',
                            icon: 'fas fa-tachometer-alt',
                            description: '为容器设置合适的资源限制和请求',
                            good: `resources:
  requests:
    memory: "64Mi"
    cpu: "250m"
  limits:
    memory: "128Mi"
    cpu: "500m"`,
                            bad: `# 没有设置资源限制`,
                            tips: '设置资源限制可以防止容器消耗过多资源，影响其他应用'
                        },
                        {
                            title: '健康检查',
                            icon: 'fas fa-heartbeat',
                            description: '配置适当的健康检查探针',
                            good: `livenessProbe:
  httpGet:
    path: /health
    port: 8080
  initialDelaySeconds: 30
  periodSeconds: 10
readinessProbe:
  httpGet:
    path: /ready
    port: 8080
  initialDelaySeconds: 5
  periodSeconds: 5`,
                            bad: `# 没有配置健康检查`,
                            tips: '健康检查可以确保只有健康的Pod接收流量'
                        },
                        {
                            title: '安全上下文',
                            icon: 'fas fa-shield-alt',
                            description: '配置安全上下文以提高安全性',
                            good: `securityContext:
  runAsNonRoot: true
  runAsUser: 1000
  readOnlyRootFilesystem: true
  allowPrivilegeEscalation: false`,
                            bad: `# 使用默认安全设置`,
                            tips: '配置安全上下文可以减少安全风险'
                        }
                    ]
                }
            },
            methods: {
                changeTheme(theme) {
                    document.documentElement.setAttribute('data-theme', theme);
                },
                validateYaml() {
                    try {
                        const parsed = jsyaml.load(this.yamlInput);
                        this.validationResult = {
                            valid: true,
                            parsed: parsed,
                            error: null
                        };
                    } catch (error) {
                        this.validationResult = {
                            valid: false,
                            parsed: null,
                            error: error.message
                        };
                    }
                },
                clearYamlInput() {
                    this.yamlInput = '';
                    this.validationResult = null;
                },
                generateYaml() {
                    const config = this.generatorConfig;
                    let yaml = '';

                    if (config.resourceType === 'deployment') {
                        yaml = `apiVersion: apps/v1
kind: Deployment
metadata:
  name: ${config.name}
  namespace: ${config.namespace}
spec:
  replicas: ${config.replicas}
  selector:
    matchLabels:
      app: ${config.name}
  template:
    metadata:
      labels:
        app: ${config.name}
    spec:
      containers:
      - name: ${config.name}
        image: ${config.image}
        ports:
        - containerPort: ${config.port}`;
                    } else if (config.resourceType === 'service') {
                        yaml = `apiVersion: v1
kind: Service
metadata:
  name: ${config.name}
  namespace: ${config.namespace}
spec:
  selector:
    app: ${config.name}
  ports:
  - protocol: TCP
    port: ${config.port}
    targetPort: ${config.targetPort}
  type: ${config.serviceType}`;
                    } else if (config.resourceType === 'pod') {
                        yaml = `apiVersion: v1
kind: Pod
metadata:
  name: ${config.name}
  namespace: ${config.namespace}
  labels:
    app: ${config.name}
spec:
  containers:
  - name: ${config.name}
    image: ${config.image || 'nginx:latest'}
    ports:
    - containerPort: ${config.port || 80}`;
                    } else if (config.resourceType === 'configmap') {
                        yaml = `apiVersion: v1
kind: ConfigMap
metadata:
  name: ${config.name}
  namespace: ${config.namespace}
data:
  config.yaml: |
    # 在这里添加您的配置
    app:
      name: ${config.name}
      port: ${config.port || 8080}`;
                    }

                    this.generatedYaml = yaml;
                },
                copyToClipboard(text) {
                    navigator.clipboard.writeText(text).then(() => {
                        // 可以添加成功提示
                        alert('已复制到剪贴板！');
                    });
                },
                downloadYaml() {
                    const blob = new Blob([this.generatedYaml], { type: 'text/yaml' });
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `${this.generatorConfig.name}-${this.generatorConfig.resourceType}.yaml`;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                }
            }
        }).mount('#app');
    </script>
</body>
</html>